<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>Scheduler</title>
 
   <script type="text/javascript" src="../view/jquery.min.js"></script>

 
 
   <script type="text/javascript">
      $(document).ready(function () {
    	  
         initialize("canvas1","_DAY1_");
         
      	 // bind event handler to clear button
         document.getElementById('clear1').addEventListener('click', function() {
        	 cleanCanvas("canvas1"); }, false);
      	 
 		initialize("canvas2","_DAY2_");
         
       	 // bind event handler to clear button
          document.getElementById('clear2').addEventListener('click', function() {
         	 cleanCanvas("canvas2"); }, false);
       	 
          initialize("canvas3","_DAY3_");
          
       	 // bind event handler to clear button
          document.getElementById('clear3').addEventListener('click', function() {
         	 cleanCanvas("canvas3"); }, false);
       	 
          initialize("canvas4","_DAY4_");
          
       	 // bind event handler to clear button
          document.getElementById('clear4').addEventListener('click', function() {
         	 cleanCanvas("canvas4"); }, false);
       	 
          initialize("canvas5","_DAY5_");
          
       	 // bind event handler to clear button
          document.getElementById('clear5').addEventListener('click', function() {
         	 cleanCanvas("canvas5"); }, false);
       	 
          initialize("canvas6","_DAY6_");
          
       	 // bind event handler to clear button
          document.getElementById('clear6').addEventListener('click', function() {
         	 cleanCanvas("canvas6"); }, false);
       	 
          initialize("canvas7","_DAY7_");
          
       	 // bind event handler to clear button
          document.getElementById('clear7').addEventListener('click', function() {
         	 cleanCanvas("canvas7"); }, false);
      	 
      });
 

      function sendData()
      {
    	  // set neutral
    	  for (i = 0; i < 100; i++) {

     		 var name="canvas1Data";
  	         if(window[name][i]==-1)
  	        	window[name][i]=50;
    		 var name="canvas2Data";
 	         if(window[name][i]==-1)
 	        	window[name][i]=50;
    		 var name="canvas3Data";
 	         if(window[name][i]==-1)
 	        	window[name][i]=50;
    		 var name="canvas4Data";
 	         if(window[name][i]==-1)
 	        	window[name][i]=50;
    		 var name="canvas5Data";
 	         if(window[name][i]==-1)
 	        	window[name][i]=50;
    		 var name="canvas6Data";
 	         if(window[name][i]==-1)
 	        	window[name][i]=50;
    		 var name="canvas7Data";
 	         if(window[name][i]==-1)
 	        	window[name][i]=50;
			}
    	  
    	  
    	  var dataToSend = [];
    	  
          dataToSend.push(JSON.stringify(window["canvas1Data"]));
          dataToSend.push(JSON.stringify(window["canvas2Data"]));
          dataToSend.push(JSON.stringify(window["canvas3Data"]));
          dataToSend.push(JSON.stringify(window["canvas4Data"]));
          dataToSend.push(JSON.stringify(window["canvas5Data"]));
          dataToSend.push(JSON.stringify(window["canvas6Data"]));
          dataToSend.push(JSON.stringify(window["canvas7Data"]));
          
          
          document.getElementById('data').value = JSON.stringify(dataToSend) ;
          
          
    	  
      }

      function getXMin()
      {
    	  return 55;
      }
      function getYMin()
      {
    	  return 22;
      }
      
      function getXMax()
      {
    	  return 444;
      }
      function getYMax()
      {
    	  return 159;
      }
      
      function normalizeX(x)
      {
    	  var retX = 100 * (( x - getXMin() ) / ( getXMax() - getXMin() ));
    	  return retX;
      }
      function normalizeY(y)
      {
    	  var retY = 100 * (( y - getYMin() ) / ( getYMax() - getYMin() ));
    	  return retY;
      }
		 
      
      
      
      // works out the X, Y position of the click inside the canvas from the X, Y position on the page
      function getPosition(mouseEvent, sigCanvas) {
         var x, y;
         if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) {
            x = mouseEvent.pageX;
            y = mouseEvent.pageY;
         } else {
            x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
         }

         var retX = x - sigCanvas.offsetLeft;

         var retY = y - sigCanvas.offsetTop;
         
         if(retX < getXMin())
		 {
			 retX = getXMin();
		 }
         if(retX > getXMax())
		 {
			 retX = getXMax();
		 }
 
		 if(retY < getYMin())
		{
			 retY= getYMin();
		}
		
		
		 if(retY > getYMax())
		{
			 retY= getYMax();
		}
		 
        return { X: retX, Y: retY };
      }
      
      function cleanCanvas(canvasName)
      {
    	  var sigCanvas = document.getElementById(canvasName);
          var context = sigCanvas.getContext("2d");
          
       // background
 		 var imageObj = new Image();
 		  imageObj.onload = function() {
 			  
 			  context.drawImage(imageObj, 0, 0);
 			
 			// feel days
 			  context.font = 'italic bold 12pt Times new roman';
 			  context.fillText('Very', 13, 36);
 			  context.fillText('Low',  13, 156);
 			  context.fillText(window[canvasName+"Title"], 215, 16);
 			  
 		  };
 		  imageObj.src = '../view/background.png';
 		  
 		  // clean array
 		  window[canvasName+"Data"] = [];
 		  for (i = 0; i < 100; i++) {
 	         window[canvasName+"Data"].push(-1);
			}
  		 
      }
 
      function initialize(canvasName, title) {
         // get references to the canvas element as well as the 2D drawing context
         var sigCanvas = document.getElementById(canvasName);
         var context = sigCanvas.getContext("2d");
         context.c
         context.strokeStyle = 'Blue';
		 
         window[canvasName+"Title"]=title;
         cleanCanvas(canvasName);
		 

 
            // start drawing when the mousedown event fires, and attach handlers to
            // draw a line to wherever the mouse moves to
            $("#" + canvasName).mousedown(function (mouseEvent) {
               var position = getPosition(mouseEvent, sigCanvas);
 
               context.moveTo(position.X, position.Y);
               context.beginPath();
               
               var dataX = Math.round(normalizeX(position.X));
               var dataY = Math.round(normalizeY(position.Y));
               if(dataY > window[canvasName+"Data"][dataX])
              	 window[canvasName+"Data"][dataX] = dataY;
 
               window["lastDataX"]=dataX;
               window["lastDataY"]=dataY;
               
               // attach event handlers
               $(this).mousemove(function (mouseEvent) {
                  drawLine(mouseEvent, sigCanvas, context, canvasName);
               }).mouseup(function (mouseEvent) {
                  finishDrawing(mouseEvent, sigCanvas, context, canvasName);
               }).mouseout(function (mouseEvent) {
                  finishDrawing(mouseEvent, sigCanvas, context, canvasName);
               });
            });
 
      }
 
      // draws a line to the x and y coordinates of the mouse event inside
      // the specified element using the specified context
      function drawLine(mouseEvent, sigCanvas, context, canvasName) {
 
         var position = getPosition(mouseEvent, sigCanvas);
         

         context.lineTo(position.X, position.Y);
         context.stroke();
 		 

         var x = position.X;
         var y = position.Y;
         
         var dataX = Math.round(normalizeX(x));
         var dataY = Math.round(normalizeY(y));
         
         var deltaX = dataX - window["lastDataX"];
         var deltaY = dataY - window["lastDataY"];
         var angle = deltaY/deltaX;
         
         var valToAdd = deltaX/Math.abs(deltaX);
         
         for(i = 0 ; i != deltaX; i += valToAdd)
        	 {
        	 	 var calcY = window["lastDataY"] + angle * i;
        	 		 
	             if(calcY > window[canvasName+"Data"][window["lastDataX"] + i])
	            	 window[canvasName+"Data"][window["lastDataX"] + i] = calcY;
        	 }
         

         window["lastDataX"]=dataX;
         window["lastDataY"]=dataY;
         
         
      }
 
      // draws a line from the last coordiantes in the path to the finishing
      // coordinates and unbind any event handlers which need to be preceded
      // by the mouse down event
      function finishDrawing(mouseEvent, sigCanvas, context, canvasName) {
         // draw the line to the finishing coordinates
         drawLine(mouseEvent, sigCanvas, context, canvasName);
         context.closePath();
 
         // unbind any events which could draw
         $(sigCanvas).unbind("mousemove")
                     .unbind("mouseup")
                     .unbind("mouseout");
      }
   </script>
   
</head>
 
 
<body>
   <h1>Insert your preferences</h1>
 

    <canvas id="canvas1" width="445px" height="181px" canvas></canvas><br/>
    <input type="button" id="clear1" value="Clear"><br/>

	<canvas id="canvas2" width="445px" height="181px" canvas></canvas><br/>
	<input type="button" id="clear2" value="Clear"><br/>
	
    <canvas id="canvas3" width="445px" height="181px" canvas></canvas><br/>
    <input type="button" id="clear3" value="Clear"><br/>

	<canvas id="canvas4" width="445px" height="181px" canvas></canvas><br/>
	<input type="button" id="clear4" value="Clear"><br/>
	
    <canvas id="canvas5" width="445px" height="181px" canvas></canvas><br/>
    <input type="button" id="clear5" value="Clear"><br/>

	<canvas id="canvas6" width="445px" height="181px" canvas></canvas><br/>
	<input type="button" id="clear6" value="Clear"><br/>
	
    <canvas id="canvas7" width="445px" height="181px" canvas></canvas><br/>
    <input type="button" id="clear7" value="Clear"><br/>

	
	
	<form name="input" action="save.php" method="post">

	 	<input name="subEventId" type="hidden" id="subEventId" value="_SUBEVENTID_">
	 	<input name="emailId" type="hidden" id="emailId" value="_EMAILID_">
		<input name="data" type="hidden" id="data" value="">
		<input type="submit" value="Send" onclick="return sendData();">

	</form> 
	<hr>
	<b>Other schedules:</b>
 <ul>
 	_RESPONSES_
</ul> 


</body>
</html> 